<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>我的心得</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<div class="app_head">
			<span class="left back"></span>
			<span class="name">我的心得列表</span>
		</div>

		<div class="app_main">
			<div class="space"></div>
			<div class="nocontent animated fadeInUp">
				<img src="../../lib/img/loading.gif" class="minimize" alt="">
				<div class="text minimize">
					准备数据
				</div>
			</div>
			<div class="app_box transparent animated fadeInUp hide">
				<div class="box_cont">
					<ul id="artcircle_list" class="list_item sociality_list clearfix">
						<li class="nocontent por">
							<img src="../../lib/img/nocomment.png" alt="">
							<div class="text">
								您未发布过心得
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="loading_line hide animated fadeInUp">
				<a href="javascript:;" class="loading_more"></a>
			</div>
		</div>
	</div>
</div>

<script id="artcircle_list_template" type="text/html">
	<%for(var i in data.data) { var _data_ = data.data[i]; %>
		<li tapmode onclick="_$.viewArtcircle(this,<%:=_data_.id%>,true)">
			<img class="sociality_pic imgcache" src="<%:=img%>" data_src="<%:=_data_.avatar%>" alt="">
			<span class="sociality_username">
				<%:=_data_.author%>
			</span>
			<span class="sociality_date">
				<%:=_data_.date%>
			</span>
			<span class="sociality_zan <%:=_data_.zan.end===true?'active':'unactive'%>">
				<%:=_data_.zan.num%>
			</span>
			<span class="sociality_comment">
				<%:=(_data_.comment!==null?_data_.comment.length:0)%>
			</span>
			<div class="sociality_cont clearfix">
				<%:=_data_.intro%>
			</div>
			<div class="sociality_imgs clearfix">
				<%for(var j in _data_.pics) { var _pics_ = _data_.pics[j]%>
				<img class="imgcache" src="<%:=img%>" data_src="<%:=_pics_.thumb%>"  picture="<%:=_pics_.picture%>" alt="">
				<%}%>
			</div>
		</li>
	<%}%>
</script>

<script>
	var
		pageData,
		dataUpdate = function(data){
			console.log('dataUpdate run');
			if(_$.getType(data)!=='object'){
				return;
			}else{
				console.log(JSON.stringify(pageData));
				for(var i in pageData.data){
					if(pageData.data[i].id === data.id){
						pageData.data[i]=data;
					}
				}
				_$.template('artcircle_list_template', {'data': pageData, 'img': _$.imgCache.default}, function (html) {
					$('#artcircle_list').html(html);
					_$.imgCache.load();
				})
			}
		},
		runHtml = function (data,isInit) {
			_$.template('artcircle_list_template', {'data': data, 'img': _$.imgCache.default}, function (html) {
				var list = $('#artcircle_list');
				//结果判断
				if (isInit===true) {
					console.log('初始化动作');
					if( _$.getType(data.data)==='array'){
						list.html(html);
						_$.sleep(function () {
							$('.nocontent,.app_box,.loading_line').toggleClass('hide')
						},500);
					}else{
						list.find('.nocontent').removeClass('hide');
						$('.loading_more').hide();
					}
				}else{
					console.log('加载更多的动作');
					if( _$.getType(data.data)==='array'){
						list.append(html);
					}else{
						$('.loading_more').addClass('nomore');
					}
				}
			});
		},
		initXinde=function(){
			//初始化的逻辑
			_$.ajax({
				interface: 'search',
				data: {
					tag: 'artcircle_list',
					self: 1,
					number:0
				},
				call: function (data) {
					if(data.status===201 || data.data===null){
						$('.nocontent').addClass('hide');
						$('.app_box').removeClass('hide');
						$('#artcircle_list').html('<li class="nocontent por"><img src="../../lib/img/nocomment.png" alt=""><div class="text">您未发布过心得</div></li>');
					}else{
						pageData = data;
						runHtml(data,true);
						_$.imgCache.load();
						$('.loading_more').removeClass('nomore');
					}

				}
			});
		},
		appready = function () {
			//加载更多的逻辑
			$('.loading_more').on('click', function () {
				var _self = $(this);
				if(_self.hasClass('nomore')){
					return false;
				}else{
					_self.addClass('active');
					_$.ajax({
						interface: 'search',
						data: {
							tag: 'artcircle_list',
							self: 1,
							number:$('#artcircle_list li').length
						},
						call: function (data) {
							if(data.status===200){
								_self.removeClass('active');
							}else{
								_self.removeClass('active').addClass('nomore');
							}
							runHtml(data,false);
							_$.imgCache.load();
						}
					});
				}
			})
			initXinde();
		};

</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>